@import "base.scss";
@import "mixin.scss";

/* titleBox */
.SY-setContent {
    .titleBox {
        height: 5.4 * $fontSize10;
        line-height: 5.4 * $fontSize10;
        margin-top: 1.5 * $fontSize10;
        padding-left: 4 * $fontSize10;
        font-size: $fontSize18;
        color: $color111;
        background: $colorfff;
    }
}

/* SY-mainNotify */
.SY-mainNotify {
    margin: $fontSize10 0 12 * $fontSize10;
    min-height: 55.5 * $fontSize10;
    font-weight: 300;
    > div {
        background: $colorfff;
    }
    /* notifyNav */
    .notifyNav {
        width: 13.8 * $fontSize10;
        .item {
            height: 5 * $fontSize10;
            &.active {
                a {
                    color: $theme;
                    border-color: $theme;
                }
            }
            a {
                font-size: $fontSize16;
                color: $color111;
                height: 4 * $fontSize10;
                line-height: 4 * $fontSize10;
                margin:$fontSize10 / 2 0;
                border-left: $fontSize12 / 3 solid $colorfff;
            }
            .dot {
                display: block;
                top: $fontSize12;
                left: 9.8 * $fontSize10;
                height: $fontSize16;
                line-height: 1.5 * $fontSize10;
                padding: 0 $fontSize12 / 2;
                text-align: center;
                font-size: $fontSize12;
                color: $colorfff;
                @include borderRadius($fontSize20);
                background: #ff3232;
            }
        }
    }
    /* notifyContent */
    .notifyContent {
        width: 105.2 * $fontSize10;
        .tabNav {
            padding:$fontSize20 3 * $fontSize10;
            font-size: $fontSize16;
            border-bottom: 1px solid $colore5;
            .item {
                margin-right: 4 * $fontSize10;
                &.active a {
                    color: $color000;
                }
            }
            a {
                padding:0 $fontSize12 / 2;
                @include link-colors(#949494,$color666);
            }
        }
        .loading {
            color: $colorab;
            padding: 4 * $fontSize10 !important;
        }
        .emptyInfo {
            padding:12 * $fontSize10 0;
            font-size: $fontSize14;
            color: $colorab;
            .icon {
                width: 11.1 * $fontSize10;
                height: 10.5 * $fontSize10;
                margin: 0 auto 1.5 * $fontSize10;
                background-image: url("../img/icons/info.png");
                background-repeat: no-repeat;
                background-position: - 33 * $fontSize10 0;
            }
        }
    }
    /* notice */
    .noticeContent {
        .content {
            > div > div {
                padding:2.5 * $fontSize10 3 * $fontSize10;
                margin:0 $fontSize20;
                border-bottom: $fontSize10 / 10 solid $colore5;
                &:last-child {
                    border-bottom: none;
                }
            }
        }
        .times .day {
            margin-right: $fontSize12 / 2;
        }
        .text {
            font-size: $fontSize14;
            color: $color666;
            line-height: $lineHeight;
            margin-top: $fontSize16;
            a {
                color: #4893d3;
            }
        }
    }
    .noticeContent,.commentContent,.leaveWordContent,.letterContent {
        .avatar {
            width: 7 * $fontSize10;
            height: 7 * $fontSize10;
            margin-right: $fontSize16;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .msgDetail {
            width: 86.6 * $fontSize10;
            .msgFrom {
                margin-top: $fontSize16 / 2;
            }
        }
    }
    /* notice && letter */
    .noticeContent,.letterContent {
        .nickName {
            font-size: $fontSize16;
            color: $color333;
            margin-right: $fontSize20;
        }
        .times {
            font-size: $fontSize14;
            color: $color666;
        }
    }
    /* comment && leaveWord */
    .commentContent,.leaveWordContent {
        .item {
            padding:2.5 * $fontSize10 3 * $fontSize10;
            margin:0 $fontSize20;
            border-bottom: $fontSize10 / 10 solid $colore5;
            &:last-child {
                border-bottom: none;
            }
        }
        .msgFrom {
            p {
                font-size: $fontSize14;
                color: $color333;
            }
            .nickName {
                font-size: $fontSize16;
                margin-right: $fontSize14;
                color: $color333;
            }
            .fl a {
                margin-left: $fontSize10 / 2;
                @include link-colors($theme,$darkTheme);
                &:first-child {
                    margin-left: 0;
                }
            }
            .reply {
                font-size: $fontSize14;
                &:hover {
                    color: $color000;
                }
            }
        }
        .times {
            margin:$fontSize12 0;
            font-size: $fontSize14;
            color: $color666;
            .day {
                margin-right: $fontSize12;
            }
        }
        .replyWord {
            font-size: $fontSize14;
            color: $color333;
            line-height:$lineHeight;
        }
        .showWord {
            margin-top: $fontSize16;
            .triangle {
                left: 3 * $fontSize10;
                top: - $fontSize16 / 2;
                width: 0;
                height: 0;
                margin-left: - $fontSize12 / 6;
                border-left: $fontSize16 / 2 solid transparent;
                border-right: $fontSize16 / 2 solid transparent;
                border-bottom: $fontSize16 / 2 solid #f4f4f4;
            }
            .text {
                line-height: $lineHeight;
                padding: $fontSize12 $fontSize14;
                font-size: $fontSize14;
                color: $color666;
                background: #f4f4f4;
                a {
                    @include link-colors($theme,$darkTheme);
                }
            }
        }
        .replyBox {
            margin-top: $fontSize18;
            input {
                width: 83.2 * $fontSize10;
                padding:$fontSize10 $fontSize16;
                outline: none;
                line-height: $lineHeight;
                font-size: $fontSize14;
                color: $color333;
                @include border($fontSize10 / 10,solid,#e2e2e2);
                &::placeholder {
                    color: #c3c3c3;
                }
            }
            .confirmBtn {
                width: 6.8 * $fontSize10;
                height: 3.8 * $fontSize10;
                line-height: 3.8 * $fontSize10;
                margin-top: $fontSize14;
                font-size: $fontSize16;
                color: $colorfff;
                @include link-posColor($theme,$darkTheme);
            }
        }
    }
    /* letterChat */
    .letterChatBox {
        .backBtn {
            font-size: $fontSize20;
            &:hover {
                color: $color333;
            }
        }
        .title .nickName {
            display: inline-block;
            max-width: 40 * $fontSize10;
            color: $color111;
            vertical-align: top;
        }
        .chattingBox {
            height: 48.6 * $fontSize10;
            overflow-y: auto;
            border-bottom: $fontSize10 / 10 solid $colore5;
            &::-webkit-scrollbar {
                width: $fontSize10 / 2;
                height: $fontSize10 / 2;
            }
            &::-webkit-scrollbar-track {
                background:#FF66D5;
            }
            &::-webkit-scrollbar-thumb {
                background:$colorccc;
                @include borderRadius($fontSize16);
            }
            &::-webkit-scrollbar-track-piece {
                background: #eee;
            }
            li {
                padding:0 2 * $fontSize12;
                margin-bottom: $fontSize20;
            }
            .checkMoreBtn {
                margin-top: $fontSize20;
                font-size: $fontSize14;
                &:hover {
                    color: $color333;
                }
            }
            .timeTips {
                font-size: $fontSize12;
                color: #9f9f9f;
                margin:2.5 * $fontSize10 0 $fontSize18;
                .day {
                    margin-right: $fontSize10;
                }
            }
            .avatar {
                width: 4.6 * $fontSize10;
                height: 4.6 * $fontSize10;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .letterText {
                max-width:85.2 * $fontSize10;
                padding:$fontSize12;
                font-size: $fontSize14;
                line-height: $lineHeight;
            }
            .triangle {
                width: 0;
                height: 0;
                top: $fontSize10;
                margin-left: - $fontSize10 / 5;
                border-top: $fontSize16 / 2 solid transparent;
                border-bottom: $fontSize16 / 2 solid transparent;
            }
            .recieveLetter {
                .avatar {
                    margin-right: 1.5 * $fontSize10;
                }
                .letterText {
                    background: #f2f2f2;
                    color: $color666;
                }
                .triangle {
                    left: - $fontSize10;
                    border-right: $fontSize16 solid #f2f2f2;
                }
            }
            .sendLetter {
                .avatar {
                    margin-left: 1.5 * $fontSize10;
                }
                .letterText {
                    background: $theme;
                    color: $colorfff;
                }
                .triangle {
                    right: - $fontSize10;
                    border-left: $fontSize16 solid $theme;
                }
            }
        }
        .writeLetter {
            padding: 2 * $fontSize16 2 * $fontSize12 4 * $fontSize10;
            .avatar {
                width: 4.6 * $fontSize10;
                height: 4.6 * $fontSize10;
                margin-right: $fontSize20;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .sendBtn {
                height: 4 * $fontSize10;
                line-height: 4 * $fontSize10;
                padding: 0 2.5 * $fontSize10;
                margin:$fontSize20 0 0 91 * $fontSize10;
                font-size: $fontSize16;
                color: $colorfff;
                @include link-posColor($theme,$darkTheme);
            }
            &.disable {
                .inputField {
                    background: rgb(242,242,242);
                }
                .sendBtn {
                    color: #b6b6b6;
                    background: #e7e7e7;
                    cursor: default;
                }
            }
        }
        .inputField {
            width: 92 * $fontSize10;
            height: 5 * $fontSize10;
            line-height: 5 * $fontSize10;
            overflow: hidden;
            background: rgba(242,242,242,0);
            input {
                width: 83 * $fontSize10;
                height: 4 * $fontSize12;
                border:none;
                outline: none;
                font-size: $fontSize14;
                color: $color666;
                padding-left:$fontSize18;
                background: rgba(255,255,255,0);
            }
            .wordsLimit {
                right: $fontSize16 / 2;
                font-size: $fontSize14;
                color: #cdcdcd;
                .warning {
                    color: #ff2020;
                }
            }
        }
    }
    /* letter */
    .letterContent {
        .item {
            padding:2.5 * $fontSize10 3 * $fontSize10;
            margin:0 $fontSize20;
            border-bottom: $fontSize10 / 10 solid $colore5;
            &:last-child {
                border-bottom: none;
            }
        }
        .operate {
            font-size: $fontSize14;
            cursor: pointer;
            i {
                font-size: $fontSize16;
            }
            &:hover {
                .deleteBtn {
                    display: block;
                }
                i {
                    @include transform(rotate(180deg));
                }
            }
            .deleteBtn {
                display: none;
                top: $fontSize16;
                right: - $fontSize10 / 2;
                width: 7 * $fontSize10;
                height: 2 * $fontSize18;
                line-height: 2 * $fontSize18;
                padding: 0 $fontSize16 / 2;
                @include link-colors($colorab,$color333);
                @include boxShadow(0 0 $fontSize14 rgba(0,0,0,.16));
                background: $colorfff;
            }
        }
        .textBox {
            margin-top: $fontSize16;
            .text {
                font-size: $fontSize14;
                color: $color666;
                line-height: $lineHeight;
                max-width: 84 * $fontSize10;
            }
            .reply {
                font-size: $fontSize14;
                &:hover {
                    color: $color000;
                }
            }
        }
    }
}
